@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  margin: 0 !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  background: linear-gradient(135deg, #0a1f3a 0%, #162b4d 100%) !important;
}
#app{
  background: transparent!important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
  .el-upload-list__item {
       transition: none !important;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

.app-main{
  min-height: 100%!important;
}
.el-upload-list__item {
  transition: none !important;
}
.import {
  display: inline-block;
  margin-left: 5px;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: 20px;
  padding-top: 10px;
  // background: linear-gradient(135deg, #123a6e 0%, #162b4d 100%) !important;
  background: transparent!important;
}
.el-card {
  background: transparent !important;
  backdrop-filter: blur(10px);
  border: none !important;
  // box-shadow: 
  //   0 8px 32px rgba(0, 21, 41, 0.4),
  //   inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    none !important;
  border-radius: 0 !important;
  transition: all 0.3s ease;
  
  &:hover {
    // background: rgba(255, 255, 255, 0.12) !important;
    // border-color: rgba(24, 144, 255, 0.6) !important;
    // box-shadow: 
    //   0 12px 40px rgba(0, 21, 41, 0.6),
    //   inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    // transform: translateY(-2px);
  }
}
.el-table tr{
  background: transparent !important;
}
.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border: none;
}
.pagination-container[data-v-72233bcd]{
  background: transparent !important;
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  border: none !important;
  background: none !important;
}
.el-table td{
  border-bottom: transparent!important;
}
.el-pagination__total,.el-pagination__jump{
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 3. 卡片头部样式 */
.el-card__header {
  // background: linear-gradient(90deg, 
  //   rgba(24, 144, 255, 0.2) 0%, 
  //   rgba(24, 144, 255, 0.1) 100%) !important;
  border-bottom: 1px solid rgba(24, 144, 255, 0.3) !important;
  padding: 1px 20px !important;
  padding-bottom: 5px!important;
  font-weight: 600;
  color: #69c0ff !important;
  font-size: 15px;
  backdrop-filter: blur(5px);
}

/* 4. 卡片内容区域 */
.el-card__body {
  padding: 10px !important;
  color: #e8f4ff !important;
}


.navbar{
  background: #2b2f3a !important;
}
.hamburger{
  color: #fff !important;
}
.el-breadcrumb__inner a{
  color: #fff !important;
}
.user-avatar{
  color: #fff !important;
  margin-right: 5px;
}

/* 6. 按钮样式适配深色 */
.el-button--primary {
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%) !important;
  border: none !important;
  // border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.4) !important;
  color: #fff !important;
  font-weight: 500;
  transition: all 0.3s ease !important;
  
  &:hover,
  &:focus {
    background: linear-gradient(135deg, #40a9ff 0%, #5cdbd3 100%) !important;
    box-shadow: 0 6px 20px rgba(24, 144, 255, 0.6) !important;
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* 7. 表格样式适配深色 */
.el-table {
  background: transparent !important;
  border: none !important;
  border-radius: 0px !important;
  backdrop-filter: blur(5px);
}

.el-table th {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 16px;
  border-bottom: none !important;
}

.el-table td {
  background: transparent !important;

  color: #e8f4ff !important;
}
.el-table .el-table__row:nth-child(even) {
  background-color: #0D2D52!important;
}
// .el-table--enable-row-hover .el-table__body tr:hover>td {
//   background: rgba(24, 144, 255, 0.1) !important;
// }
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
  background-color: #F4F4F5!important;
}

/* 8. 输入框样式适配深色 */
.el-input__inner {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #e8f4ff !important;
  border-radius: 6px !important;
  
  &::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  
  &:focus {
    border-color: #1890ff !important;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.15) !important;
  }
}

/* 9. 标签样式 */
.el-tag {
  background: rgba(24, 144, 255, 0.2) !important;
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  color: #69c0ff !important;
  border-radius: 4px;
  backdrop-filter: blur(5px);
}

/* 10. 分页组件 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%) !important;
  color: #fff !important;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #69c0ff !important;
}

/* 11. 菜单样式（如果侧边栏也需要适配） */
.el-menu {
  background: #0E335D !important;
  border-right: none !important;
 
}
#app .sidebar-container .el-menu{
  width: unset!important;
}
.el-menu-item {
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent!important;
  &:hover {
    background: rgba(24, 144, 255, 0.1) !important;
    color: #69c0ff !important;
  }
  
  &.is-active {
    background: linear-gradient(90deg, 
      rgba(24, 144, 255, 0.3) 0%, 
      transparent 100%) !important;
    color: #1890ff !important;
    border-right: 3px solid #1890ff;
  }
}

/* 12. 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(24, 144, 255, 0.5);
  border-radius: 3px;
  
  &:hover {
    background: rgba(24, 144, 255, 0.7);
  }
}
.el-menu--collapse {
  width: 100%!important;
}

.el-cascader-panel{
  background-color: #325175!important;
  border: none!important;
  border-radius: 0!important;
}
.el-cascader-node__label{
  color: #cad3e0 !important;
}
.el-cascader-node:hover{
  background-color: rgba(24, 144, 255, 0.1) !important;
}
.el-cascader__dropdown{
  border: none!important;
}
.el-cascader-menu{
   border-right: none !important;
}
.el-popper{
  border-bottom-color:red!important;
}
.in-active-path{
  background: transparent!important;
}

// src/styles/index.scss

/* ========== el-dialog 弹出框样式 ========== */

/* 1. 对话框遮罩层 */
.el-dialog__wrapper {
  backdrop-filter: blur(5px);
  
  .el-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px);
  }
}
.el-new-dialog{
  background: linear-gradient(135deg, 
    rgba(10, 31, 58, 0.95) 0%, 
    rgba(22, 43, 77, 0.95) 100%) !important;
    background: transparent!important;
    padding: 20px;padding-top: 70px;width: 100%;
}

/* 2. 对话框主体 */
.el-dialog {
  // background: linear-gradient(135deg, 
  //   rgba(10, 31, 58, 0.95) 0%, 
  //   rgba(22, 43, 77, 0.95) 100%) !important;
  // backdrop-filter: blur(20px);
  // border: 1px solid rgba(24, 144, 255, 0.4) !important;
  // border-radius: 12px !important;
  // box-shadow: 
  //   0 20px 60px rgba(0, 0, 0, 0.5),
  //   0 0 0 1px rgba(255, 255, 255, 0.1),
  //   inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  background: none !important;
  border: none!important;
  box-shadow: none!important;
  /* 对话框头部 */
  .el-dialog__header {
    background: linear-gradient(90deg, 
      rgba(24, 144, 255, 0.3) 0%, 
      rgba(24, 144, 255, 0.1) 100%) !important;
    // border-bottom: 1px solid rgba(24, 144, 255, 0.3) !important;
    // padding: 16px 20px !important;
    // border-radius: 12px 12px 0 0;
    // backdrop-filter: blur(10px);
    padding: 0!important;
    .el-dialog__title {
      color: #69c0ff !important;
      font-weight: 600;
      font-size: 16px;
      text-shadow: 0 0 10px rgba(105, 192, 255, 0.3);
    }
    
    .el-dialog__headerbtn {
      top: 16px !important;
      right: 20px !important;
      
      .el-dialog__close {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 18px;
        transition: all 0.3s ease;
        
        &:hover {
          color: #ff4d4f !important;
          transform: scale(1.2);
        }
      }
    }
  }

  /* 对话框内容区域 */
  .el-dialog__body {
    padding: 20px !important;
    color: #e8f4ff !important;
    // background: transparent !important;
    
    /* 内容区域内的文字样式 */
    p, span, div {
      color: #e8f4ff !important;
    }
    
    /* 表单标签样式 */
    .el-form-item__label {
      color: #a0d2ff !important;
      font-weight: 500;
    }
  }
  
  /* 对话框底部 */
  .el-dialog__footer {
    background: linear-gradient(90deg, 
      rgba(255, 255, 255, 0.05) 0%, 
      rgba(255, 255, 255, 0.02) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 20px !important;
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(5px);
    
    /* 底部按钮容器 */
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
  }
}

/* 3. 对话框内的表单元素样式 */
.el-dialog {
  /* 输入框 */
  .el-input__inner {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e8f4ff !important;
    border-radius: 6px;
    
    &::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }
    
    &:focus {
      border-color: #1890ff !important;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
      background: rgba(255, 255, 255, 0.15) !important;
    }
  }
  
  /* 选择器 */
  .el-select .el-input__inner {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e8f4ff !important;
  }
  
  /* 文本域 */
  .el-textarea__inner {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e8f4ff !important;
    
    &:focus {
      border-color: #1890ff !important;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
    }
  }
  
  /* 单选框 */
  .el-radio__label {
    color: #e8f4ff !important;
  }
  
  /* 复选框 */
  .el-checkbox__label {
    color: #e8f4ff !important;
  }
  
  /* 开关 */
  .el-switch__label {
    color: #e8f4ff !important;
    
    &.is-active {
      color: #1890ff !important;
    }
  }
}

/* 4. 特殊类型的对话框 */
/* 确认对话框 */
.el-message-box {
  background: linear-gradient(135deg, 
    rgba(10, 31, 58, 0.95) 0%, 
    rgba(22, 43, 77, 0.95) 100%) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  
  .el-message-box__header {
    .el-message-box__title {
      color: #69c0ff !important;
    }
  }
  
  .el-message-box__content {
    color: #e8f4ff !important;
  }
  
  .el-message-box__btns {
    .el-button {
      border-radius: 6px;
    }
  }
}

/* 5. 对话框动画效果 */
.el-dialog {
  animation: dialogFadeIn 0.3s ease;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 6. 响应式调整 */
@media (max-width: 768px) {
  .el-dialog {
    width: 90% !important;
    margin: 5% auto !important;
    
    .el-dialog__body {
      padding: 15px !important;
    }
  }
}

/* 7. 对话框内的表格样式 */
.el-dialog .el-table {
  background: rgba(255, 255, 255, 0.05) !important;
  
  th {
    background: rgba(24, 144, 255, 0.2) !important;
    color: #69c0ff !important;
  }
  
  td {
    color: #e8f4ff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}
.el-dialog .el-dialog__header{
  padding: 0!important;
}

/* 顶部布局样式 */
.top-layout {
  // 确保所有内容都适配新布局
}

/* 响应式调整 */
@media (max-width: 992px) {
  .top-navbar {
    .top-menu {
      display: none !important;
    }
    
    .navbar-left {
      .logo-wrapper .title {
        display: none;
      }
    }
  }
}
#app .sidebar-container{
  width: 100%!important;
  // height: 50px!important;
  position: static!important;
  overflow:auto!important;
}

.sidebar-container{
  // height: 60px!important;
}
#app .sidebar-container.has-logo .el-scrollbar{
  height: auto!important;
}
#app .main-container{
  margin-left: 0!important;
}
.el-menu-item.is-active{
  // background: linear-gradient(90deg, rgba(24, 144, 255, 0.3) 0%, transparent 100%) !important;
  // color: #1890ff !important;
  border-right: none!important;
}
.el-menu-item:hover{
  background: #0a1f3a!important;
}
.el-submenu__title{
  // height: 60px!important;
  font-size: 16px!important;
  background: transparent!important;
}
.el-submenu__icon-arrow{
  right: 0;
  color: #fff!important;
  padding: 0 5px;
}
.is-active .el-submenu__title span{
  color: #38bafc !important;
  font-weight: bold;
}
.tech-border-out{
  background: 
  linear-gradient(135deg, transparent 10px, #328aee 0) 0 0, 
  linear-gradient(-135deg, transparent 10px, #328aee 0) 100% 0, 
  linear-gradient(-45deg, transparent 10px, #328aee 0) 100% 100%, 
  linear-gradient(45deg, transparent 10px, #328aee 0) 0 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  padding: 1px;
}
.tech-border {
  background: 
  linear-gradient(135deg, transparent 10px, #0E335D 0) 0 0, 
  linear-gradient(-135deg, transparent 10px, #0E335D 0) 100% 0, 
  linear-gradient(-45deg, transparent 10px, #0E335D 0) 100% 100%, 
  linear-gradient(45deg, transparent 10px, #0E335D 0) 0 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: calc(100vh - 150px) !important;
  padding: 15px;
  // border: 1px solid rgb(52, 172, 252);
  &:hover {
    // box-shadow: 
    //   0 12px 40px rgba(0, 21, 41, 0.6),
    //   inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    // transform: translateY(-2px);
  }
}
.new-title{
  width:150px;height:30px;color: #fff;margin-bottom: 15px;
}
.table-container{
  height: calc(100vh - 360px) !important;
}
.pagination-container{
  padding: 20px !important;
}

.el-form-item__content{
  text-align: center!important;
}
.el-cascader{
  width: 100%!important;
}
.admin-access{
  background-color: transparent!important;
}
.el-tree-node__content:hover{
  background-color: transparent!important;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color: rgba(24, 144, 255, 0.1) !important;
}
.border-box-content .el-select{
  width: 100%!important;
}
.el-select-dropdown{
  background-color: #203043!important;
  border: none!important;
}
.el-select-dropdown__item{
  color: #cad3e0 !important;
  transition: all 0.3s ease;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: rgba(24, 144, 255, 0.1) !important;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color:#203043!important;

}

.el-popper[x-placement^=bottom] .popper__arrow{
  border-bottom-color:#203043!important;
}

.el-range-input {
  background: #203043!important;
  color: #cad3e0 !important;
}
.el-input-number__decrease,.el-input-number__increase{
  background: #07192E!important;
  border-left: #203043!important;
  border-right: #203043!important;
}